CS> 


Techniques and strategies 


Table of contents 


T:lntroductionto"ESS: ss eteaslen ne es Dre per 3 
What:is:CSS?.2..2sa228 een Menue Tee ehegee ersehen 3 
Why’should you use GSS?......uun.e rue ae ra Laer 4 
Basic syntax and rule structure .......uueseeeenenssnnennnnnenennnnnnnennennnnennnnnnnnnnennnnnnnnnnnnnnnennnnennennensnnennnnennennennnnen 5 

2.Selectors:and Properties... einer ak akeelesereikieieze 6 
tYpe:selectors ne ee ee ee ede rk 6 
Class-and|ID'selectörs........ 2:00 een emp ep ine 8 
attributeiselectors..... nee a de TahilgnassaneeeTenenhgrenu feet benennt 10 
Generäl:selectors..... ss as nee een ne fee re ee 12 
Font, color, and background properties...........uuusssesenennennnnnnnenennnnnnnnnnnnnnnnnnnnnnnnnnnnnnnonnnnnnnsnnennennnnnnnenn 14 
Text formatting properties....ueseneensensnnnnenennennennnnnnnnnonnennnnnnnnnnnnonnennnnnennnnnnnnnennnnnnnnnnnnonnennnnnnnnannnannnenn 16 
Box model andispäcingipropertiesunna.. nee ik 18 

3:Layout and Positioning.....u.u...er.nuiera aaa 19 
Blocks; inlineelements......... ss Heeres 19 
FIEXbOX layout. ee re rate Renee 23 
BrIA layout er ea ee Telesis een 24 

4.Transitions, animations and transformations ........uuuesenesenenenenenenenenenenenenenenenenenenenenenenenenennnenenenenenenenn 26 
ESS-TFANSIEIONS 4.2.44 5:22 seat zea esse egal areas Ta ac Hess De araBa TH Bene T HB ee SAH ner aen es Beben era steeer 26 
CSS animations u... nein nsnrheieepeennsecknneegpetreiegneerreenerresesngtrre 27 
CSS. transformatiönsı.uaraasesenase en aka En eiishne 30 

5.Media queries and responsive web design ............22220ssssenonnnennnnennenonnnnnnnnnnnnenonnnnnennnnnnnenonnnnnensnnennennn 32 
Media queries and media types .......unneseesenennennennnneennnonnennnnnennnnenonnennnnnnnnnnnnnnnennnnnnnnannnonnennsnnnnnennnannnen 32 
Responsive web design techniques.......ueeneseesssnsnneenenonnnnnnnnnnnnnnnnnnnnnnnnnnnnunnnnnnnnnnnnnnnnnonnnnnsnnnnnannnnnnnen 32 
Adaptation of layouts and images for different screen sizes.......uuneesesensennennnnenennnnnnnennennnnennnnennennenn 33 

6.Use of CSS frameworks and tools..............222002240044400nnnnnonsnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnennnonnnnennnnnnnnnnnnsnnnnnnnnnnn 35 
Bootstraß an. 35 
nloJ@]a[cH-14 (0) WRSERPEITFPECHEPRERESPERFER ERFE/EES FE EEE EEELTERST EERSORIRERHETEFTORERENEHELERTEFEUREFLEEFRIERSETROREETEERHEEE EEE GTERFRTESTEE 36 
‚o[E]}0 0: PSCNRERESRERENEEREFESEERTENEESTSTELSEETEBEENSERERIEHETETTENTE RER PENRTTENTESERSEENSTERTERTETEESTETENESTERRESPEENENCHE SCENE 37 
CSS.preprocessors (Sass; Less)... u. alu Ren äikiesinb nn 38 
CSS AutoprefiXer....nsnn ia lu 39 

7.Troubleshooting and troubleshooting ...................22222200@0202200000nnnnononnnnnnnnnnennonnnnnnnennnnnnnenonnnnnensnnennnnenn 40 
Browser Compatibility Issues .........22222cscsenennennnnnnnenenonnennnnnennnnnnonnnnnnnnnnnnnnnnnnennnnnnnnnnnnennennnnnnnnnnnnnnnnen 40 
CSS.debugging tools... aaa laakane 41 
Troubleshooting layout issues........eeensessenenennennennnnennnonnennnnnnnnnnnnonnennnnnnnnnnnnnnnennnnnnnnnnnnonnennnnnnnnanenennnen 42 


8.Advanced. CSS TEchniques..... se. ee ee aiilenelser rakarag eher 43 


Pseudo elements and classes .......uueesensessneseeeneennnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnunnnnnnnnnnnnnnnnnnnennnnnnnnnunnnn 43 


ÜsSE:9LSVGigraphicsa 2 er an un a eisen 44 
Use:of.web Tontsı neuere ER kb 45 
ÜSINE.@TONt-Face see nee ee RE ee ee ent ee reeleekarn 46 
UÜsingCSsS:variablesiru:. 22... 2 ea ie nn Bei ebnneeenankniese 48 
UsE‘of.ESsSs Grid.andFleXboX:4.::..:8.r ee Bis En 50 


INBFINt aan RE iind 52 


1.Introduction to CSS 


What is CSS? 

CSS (Cascading Style Sheets) is a style sheet language used to define the look of HTML documents. 
With CSS, you can control colors, fonts, spacing, sizes, positions, and many other aspects ofthe 
appearance of HTML elements. It allows you to separate your website's design from the structure of 
the HTML code, making it easier to change or customize your website's design. 


CSS rules are usually stored in a separate file linked to the HTML document. Each rule consists of a 
selector that selects the HTML element to apply the rule to, and a list of declarations that define the 
properties and values to apply to the selected element. For example, a CSS rule might be: 


pt 
color: blue; 
font-size: 16px; 


} 


This rule would color all paragraphs in an HTML document blue and set the font size to 16px. 


CSS also offers advanced features such as media queries, which allow you to customize your 
website's design for different screen sizes and devices, and animations and transformations, which 
allow you to apply dynamic effects to HTML elements. 


In fact, it is one ofthe most important technologies for web development and there are many tools 
and frameworks that make it easier for developers to use and organize CSS, such as SASS, LESS or 
Bootstrap. 


Why should you use CSS? 
There are many reasons why you should use CSS in your web projects. Some of the key benefits of 
CSS are: 


Separation of content and design: By separating the look of your website from the structure of the 
HTML code, you can organize your work better and make changes to your design faster and easier. 


Increased flexibility and maintainability: With CSS, you can customize the look of your website 
without having to change the HTML code. This makes it easier for you to adapt your website for 
different screen sizes and devices. 


Increased Accessibility: By controlling the look of your website with CSS, you can ensure that your 
website is accessible to all users, including users with disabilities. 


Increased interactivity: With CSS you can add animations and transformations to make your website 
more dynamic and interactive. 


Increased efficiency: By using CSS, you can unify many recurring design elements on your website, 
reducing the size of your HTML files and improving your website's loading time. 


Facilitate teamwork: By separating the design of your website from the structure ofthe HTML code, 
designers and developers can work independently, increasing team collaboration and efficiency. 


Ability to use CSS frameworks and libraries: There are many frameworks and libraries that make it 
easier for developers to use and organize CSS, such as Bootstrap, Foundation, Bulma etc. 


In fact, CSS is an indispensable technology for modern web development, allowing to make websites 
more attractive, flexible and accessible. Without CSS most websites would be very static and boring. 


Basic syntax and rule structure 
The basic CSS syntax and rule structure consists of selectors, properties, and values. 


Selectors: A selector is an expression that determines which HTML elements are affected by a CSS 
rule. There are different types of selectors, such as element selectors, class and ID selectors, and 
pseudoselectors. An example of an element selector would be: 


pt 
/* Rule */ 


} 


This selector would select all paragraphs in the HTML document. 


Properties: A property is an aspect of appearance that you can control with CSS. Examples of 
properties are color, font size, spacing, etc. Each property has a specific value that indicates how the 
property should be styled. An example of a property and its value would be: 


pt 
color: blue; 


} 


In this example, the "color" property would have the value "blue", which means that all selected 
paragraphs will be colored blue. 


Rule structure: A CSS rule consists of a selector followed by a curly brace containing a list of 
declarations. Each declaration consists of a property and a value, separated by a colon. Multiple 
declarations can be separated by semicolons. An example of a full CSS rule would be: 


pt 

color: blue; 
font-size: 16px; 
margin: 0; 


} 


In this example, all selected paragraphs are colored blue, with a font size of 16px and a margin of 
Opx. 


There are many more rules and techniques related to CSS such as CSS box model, positioning, 
flexbox, grid, CSS variables etc. It is important to become familiar with these techniques to improve 
your web developer skills and improve your implement projects successfully. 


2.Selectors and Properties 


type selectors 

Type selectors, also known as element selectors, are a type of selector in CSS that select HTML 
elements based on their type. They are used to apply styles to all instances of a specific HTML 
element. 


A type selector consists of the name of the HTML element to apply the rule to, without any kind of 
prefix. Examples of type selectors are: 


h1{ 
/* Rule */ 


} 


This selector would select all headings (h1) in the HTML document. 
pt 
/* Rule */ 


} 


This selector would select all paragraphs (p) in the HTML document. 
al 
/* Rule */ 


} 


This selector would select all links (a) in the HTML document. 


You can also use multiple type selectors in a rule to select multiple items at once by separating the 
names of the items with commas. Example: 


h1, h2, h3 { 
/* Rule */ 


} 


This selector would select all h1, h2 and h3 headings in the HTML document. 


There is also a universal selector (*) that selects all elements in the document. Example: 
En 
/* Rule */ 


} 


It is important to note that type selectors have lower precedence than other types of selectors such 
as class and ID selectors. This means that styles defined with a class or ID selector take precedence 
and can override styles defined with a type selector. 


lt is also possible to combine type selectors with attribute selectors or pseudo-selectors to select and 
style specific elements based on their attributes or states. 


Class and ID selectors 

Class and ID selectors are types of selectors in CSS that allow specific elements in the HTML 
document to be selected based on their class or ID attributes. They are used to apply styles to 
specific instances of an HTML element, rather than to all instances of an element. 


Class Selectors: A class selector begins with a period (.) followed by the name of the class you want to 
select. Example: 


<p class="intro">This is a paragraph with a class.</p> 


‚intro { 
/* Rule */ 


} 


In this example, the .intro selector would select all elements that have the attribute "class" with the 
value "intro", i.e. the paragraph mentioned above. 


Multiple elements can have the same class, and an element can also have multiple classes by 
separating the class names with spaces. Example: 


<p class="intro highlight">This is a multi-class paragraph.</p> 


.highlight { 
/* Rule */ 


} 


In this example, the .highlight selector would select all elements that have the attribute "class" with 
the value "highlight", i.e. the paragraph mentioned above. 


ID Selectors: An ID selector begins with a hashtag (#) followed by the name of the ID you want to 
select. Example: 


<p id="first-paragraph">This is the first paragraph with an id.</p> 
#first-paragraph { 
/* Rule */ 


} 


In this example, the #first-paragraph selector would select the element that has the attribute "id" 
with the value "first-paragraph", i.e. the paragraph mentioned above. 


It is important to note that each ID must be unique in the HTML document, i.e. there cannot be 
multiple elements with the same ID. ID selectors have higher precedence than class and type 
selectors, which means styles defined with an ID selector take precedence and can override styles 
defined with a class or type selector. 


lt is also possible to combine class and ID selectors with type selectors or pseudo-selectors to select 
and style specific elements based on their class or ID attributes, as well as their states or positions in 
the document. Example: 


<p class="intro" id="first-paragraph">This is the first paragraph with a class and an id.</p> 
p.intro#first-paragraph { 
/* Rule */ 


} 


In this example, the p.intro#first-paragraph selector would select only the element that has both the 
"class" attribute with the value "intro" and the "id" attribute with the value "first-paragraph", i.e. the 
above paragraph. 


It is good practice to use and organize class and ID selectors carefully to ensure good structure and 
maintainability of your style sheet. A good practice is to choose class and ID names that describe 
what kind of elements or purpose they serve, and to organize them in a logical hierarchy. 


attribute selectors 

Attribute selectors are a type of selectors in CSS that allow elements in the HTML document to be 
selected based on their attributes and their values. They allow styles to be applied to specific 
instances of an HTML element that have specific attributes, rather than to all instances of an 
element. 


An attribute selector is denoted by a pair of square brackets [], followed by the name of the attribute 
and the desired value. Example: 


<a href="https://www.example.com">Link with a specific attribute</a> 
alhref="https://www.example.com"] { 

/* Rule */ 

} 


In this example, the selector alhref="https://www.example.com"] would select only the link whose 
"href" attribute has the value "https://www.example.com". 


There are also several wildcard operators that can be used to select elements based on their 
attributes without knowing the exact value. Examples: 


alhref*="https"] { 
/* Rule */ 


} 


This selector would select all links whose "href" attribute starts with "https". 
alhref$=".com"] { 
/* Rule */ 


} 


This selector would select all links whose "href" attribute ends with ".com". 
alhref*="example"] { 
/* Rule */ 


} 


This selector would select all links whose "href" attribute contains "example". 


It is important to note that attribute selectors have lower precedence than other types of selectors 
such as ID and class selectors. This means that styles defined with an ID or class selector have higher 
precedence and can override styles defined with an attribute selector. 


lt is also possible to combine attribute selectors with type selectors, class and ID selectors to select 
and style specific elements based on their attributes, as well as their classes, ID attributes or type. 
Example: 


<a class="external" href="https://www.example.com">Link with a class and an attribute</a> 


a.external[href*="https"] { 
/* Rule */ 


} 


In this example, the selector a.external[href*="https"] would select only the link whose class 
"external" and whose attribute "href" begins with "https". 


It is important to carefully consider the use of attribute selectors, as in many cases they can be 
replaced by the use of class and ID selectors, thereby increasing the maintainability of the stylesheet. 


General selectors 

General selectors are a type of selectors in CSS that allow selecting elements in the HTML document 

in a more general way, rather than selecting them based on their type, classes, or ID attributes. They 
allow styles to be applied to specific groups of elements that have specific properties or relationships 
to one another. 


The general sibling selector (”) makes it possible to select elements that have a specific element as a 
sibling. Example: 


<div> 

<p>Paragraph 1</p> 
<p>Paragraph 2</p> 
<p>Paragraph 3</p> 


</div> 


B>pi 
/* Rule */ 
} 


In this example, the selector p ” p would select all paragraphs that come after the first paragraph, i.e. 
paragraphs 2 and3. 


The general child selector (>) makes it possible to select elements that are direct children of a specific 
element. Example: 


<ul> 

<li>Point 1</li> 
<li>Point 2</li> 
<li>Point 3 

<ul> 

<li>Sub-item 1</li> 
<li>Sub-item 2</li> 
</ul> 

</li> 


</ul> 


ul>lif{ 
/* Rule */ 


} 


In this example, the selector ul > li would select all list elements that are direct children of the ul list, 
i.e. items 1, 2 and 3, but not the subitems. 


The general successor selector (+) allows you to select items that immediately follow a specific item. 
Example: 


<h1>Heading</h1> 
<p>Paragraph 1</p> 


<p>Paragraph 2</p> 


hi+p{ 
/* Rule */ 


} 


In this example, the selector h1 + p would select only the first paragraph immediately following the 
heading. 


It's important to note that general selectors typically have lower precedence than other types of 
selectors, such as ID and class selectors. 


lt is also possible to combine general selectors with other types of selectors such as type selectors, 
class and ID selectors, and pseudo-selectors to select and style specific elements based on their 
properties, relationships, or states. Example: 


<div> 

<p class="intro">Paragraph 1</p> 
<p>Paragraph 2</p> 
<p>Paragraph 3</p> 


</div> 


p.intro + p:first-child { 
/* Rule */ 


} 


In this example, the selector p.intro + p:first-child would select only the first paragraph that 
immediately follows the paragraph with the class "intro" and is also the first child element. 


It is important to carefully consider the use of general selectors, as in many cases they can be 
replaced by using more specific selectors, thereby increasing the maintainability of the style sheet. 


It should also be noted that general selector support may vary from browser to browser, especially in 
older versions. 


Font, color, and background properties 
Font, color, and background properties are important parts of CSS that allow you to customize the 
look ofthe text and background of HTML elements. 


Font properties: CSS allows you to define the font, font size, font weight (bold or light), and font style 
(regular, italic, or underline) of a piece of text. Examples: 


pt 

font-family: Arial, sans-serif; 
font-size: 16px; 
font-weight: bold; 
font-style: italic; 


} 


In this example, the selector p would use the Arial font if present, sans serif otherwise, set the font 
size to 16 pixels, the font weight to bold, and the font style to italic for all paragraphs. 


Color properties: With CSS you can define the color of text, background and other elements. There 
are several ways to specify colors, such as hexadecimal codes, RGB, or HSL values. Examples: 


h1{ 
color: #ff0000; /* Red */ 


} 


body { 
background-color: rgb(255, 255, 255); /* White */ 


} 


In these examples, the h1 selector would set the color of the heading text to red, and the body 
selector would set the background color of the entire document to white. 


Background Properties: With CSS you can also define the background images, background repeat, 
background position and background size of elements. Examples: 


body { 

background-image: url("bg.jpg"); 
background-repeat: repeat-x; 
background-position: center; 
background-size: cover; 


} 


In this example, the body selector would take a background image named "bg.jpg", repeat it 
horizontally, position it in the center, and scale it to the size of the parent element. 


It is important to note that the font and color properties are important for readability and 
accessibility. It is recommended that fonts and colors be carefully selected and combined to ensure a 
pleasant reading experience and to support accessibility. 


Text formatting properties 
Text formatting properties are an important part of CSS, allowing you to customize the appearance 
oftextin a variety of ways. 


Text alignment: With CSS you can define the alignment of text within an element, eg left-aligned, 
right-aligned, centered or justified. Examples: 


p{ 


text-align: left; 


} 


h1{ 
text-align: center; 


} 


In these examples, the p selector would left-align the paragraph text, and the h1 selector would 
center the heading text. 


Text transformation: With CSS, you can convert the case of text to upper or lower case, or convert all 
letters to uppercase or lowercase. Examples: 


p{ 


text-transform: uppercase; 


} 


.hav item { 


text-transform: lowercase; 


} 


In these examples, the p selector would convert the text of the paragraphs to uppercase, and the 
selector .nav-item would convert the text of the navigation items to lowercase. 


Text decoration: CSS allows you to add or remove text decorations such as underlining, 
strikethrough, and emphasis. Examples: 


af 


text-decoration: underline; 


} 


p{ 


text-decoration: line-through; 


} 


In these examples, the selector a would add an underline to the text of the links, and the selector p 
would add a strikethrough to the text of the paragraphs. 


Line spacing: CSS allows you to define line spacing within an element. Examples: 


p{ 


line height: 1.5; 


} 


h1{ 
line height: 2; 
h 


In these examples, the selector p would set the paragraph line spacing to 1.5, and the selector h1 
would set the heading line spacing to 2. 


It is important to note that text formatting properties are important for readability and aesthetics. It 
is recommended to choose and apply these properties carefully to ensure a pleasant reading 
experience and achieve a pleasing design. It is also important to ensure that the use of these 
properties does not compromise accessibility and that they remain legible and understandable for 
users with different visual or reading abilities. 


Box model and spacing properties 
The box model and spacing properties are important parts of CSS that allow styling the appearance 
of HTML elements in terms of size, spacing, and position. 


The box model: Each HTML element is represented as a box, which consists of different areas: the 
content, the paddings, the borders and the border. With CSS you can define the size and spacing of 
each of these areas. Examples: 


div { 

width: 100px; 

height: 100px; 
padding: 10px; 

border: 1px solid #000; 
margin: 20px; 


} 


In this example, the selector div would set the box's width and height to 100 pixels, set the space 
between the content and the border to 10 pixels, add a black border 1 pixel thick, and add a 20-pixel 
space to others set items. 


Spacing properties: CSS also allows you to define the spacing between elements, both within a 
parent element and between different elements. There are four types of padding properties: margin 
(for the space between elements), padding (for the space between the content and the edge of an 
element), border (for the width of an element's border), and box-sizing (for the type and way the size 
of an element is calculated). Examples: 


pt 

margin-top: 10px; 
margin-bottom: 20px; 
padding: 5px; 

border: 1px solid #000; 
box-sizing: border-box; 


} 


In this example, the selector p would set up a 10 pixel up and 20 pixel down space between 
paragraphs, set up a 5 pixel space between the content and the edge of the paragraph, add a black 


border 1 pixel thick, and set the calculation of the size of the element to the inclusive padding and 
border. 


It is important to note that understanding the box model and spacing properties is vital to achieve an 
attractive and functional design. It is also important that the application of these properties does not 
compromise accessibility and usability. It is a good idea to choose and apply these properties 
carefully to achieve a consistent and orderly layout, and to make sense of element space and 
spacing. 


It should also be noted that support for certain spacing properties varies from browser to browser 
and it may therefore be advisable to implement fallback solutions to ensure that the theme renders 
correctly on all devices and browsers. 


3.Layout and Positioning 


Block vs. inline elements 
Block and inline elements are two types of HTML elements that differ in their behavior and display. 


Block elements are elements that always result in a new line and take up the full width of the parent 
box. By default, they have a fixed width and height and can have background colors and images. 
Examples of block elements are div, h1-h6, p, ol, ul. Example: 


<div> 
<h1>Heading</h1> 
<p>Paragraph 1</p> 
<p>Paragraph 2</p> 


</div> 


Inline elements are elements that are placed within a line and are only as wide as the element's 
content. They have no fixed width and height and cannot have background colors or images. 
Examples of inline elements are span, a, img, strong. Example: 


<p>This is an <strong>important</strong> paragraph.</p> 


It is important to note that the use of block and inline elements is usually determined by the 
semantic meaning of the content, and it is possible to change the behavior of elements using CSS. For 
example, a block element can be converted to an inline element and vice versa. 


pt 
display: inline; 


} 


img { 
display: blocks; 
} 


It is important to understand how these properties affect the layout and behavior of the elements in 
order to achieve a consistent and expected design. It's also important to ensure that the use of block 
and inline elements doesn't compromise accessibility and usability. 


It should also be noted that some block elements such as list item (li) and table cell (td) can have 
both block and inline properties, depending on usage and the context in which they are located. 


lt is good practice to keep the semantic meaning of the content in mind and to carefully plan the use 
of block and inline elements to achieve an attractive and functional design while supporting 
accessibility and usability. 


Positioning types (normal flow, absolute positioning, fixed positioning, relative positioning) 


Positioning types are various methods by which HTML elements can be placed in relation to other 
elements. 


Normal flow: This is the default method by which elements are placed when no positioning 
properties have been set. Elements in the normal flow are placed in the order in which they appear 
inthe HTML document. Block elements take up the full width of the parent box and automatically 
create a new line. Inline elements are placed within a line. 


Absolute positioning: This method allows an element to be placed at a specific position relative to its 
closest parent element with a fixed position. An element that has been positioned absolutely is 
removed from the normal flow and does not affect the position of other elements. Example: 


.box { 


position: absolute; 


top: 10px; 
right: 20px; 
} 


In this example, the element with class "box" would be placed 10 pixels from the top and 20 pixels 
from the right of the nearest positioned parent. 


Fixed positioning: This method works similar to absolute positioning, but the element stays in the 
fixed position even ifthe user scrolls. 


Relative positioning: This method makes it possible to move an element in relation to its original 
position without affecting the other elements in the normal flow. Example: 


.box { 

position: relative; 
left: 10px; 

top: -20px; 

} 


In this example, the element with class "box" would be moved 10 pixels to the left and 20 pixels up 
from its original position without affecting the position of the other elements in the normal flow. 


It's important to note that each positioning type has its own use cases and limitations, and it's 
important to choose the right method for the design you want. 


It is also important to note that support for specific positioning types varies from browser to browser 
and it may therefore be wise to implement fallback solutions to ensure the theme renders correctly 
across devices and browsers. 


lt is good practice to plan and test carefully when using positioning types to ensure that the design is 
correct and meets expectations, and that it does not compromise accessibility and usability. It's also 
important to note that using relative positioning is commonly used to position elements relative to 


each other, while absolute and fixed positioning are commonly used to position elements relative to 
the browser window or to a parent element. 


Absolute and fixed positioning can also be used to create overlays and pop-ups, while relative 
positioning is often used to move and adjust an element within its normal flow. 


It should also be noted that using positioning types in conjunction with other CSS properties such as 
transparency, transform and transition effects allows for complex and beautiful layout designs to be 
created. 


Flexbox layout 

Flexbox is a layout model in CSS that allows elements within a flexible container to be aligned, 
adjusted, and scaled in a flexible way. It offers a variety of options for designing the layout of 
elements and allows to adapt to different device and screen sizes. 


Flex container: In order to use flexbox, a flexible container must first be created by applying the 
"display: flex" or "display: inline-flex" property to an HTML element. Example: 


„Container { 
display: flexible; 
} 


Flex items: All direct children of the flexible container automatically become flex items. Each flex 
item can adjust its size, position and alignment within the container. 


Flex Axes: Flexbox has two main axes: the main axis and the cross axis. The major axis is usually left- 
to-right (or top-to-bottom, depending on the direction of writing) and the transverse axis is 
perpendicular to it. 


Flex Direction: The direction of the flex axes can be controlled using the "flex-direction" property, 
which defaults to "row", meaning the major axis is left to right. Other possible values are "row- 
"_ "column", and "column-reverse". Example: 


reverse", 
„Container { 

display: flexible; 
flex-direction: column; 


} 


In this example, the major axis would be top-to-bottom instead of left-to-right. 


Flex-Wrap: The flex-wrap property can be used to control whether flex items wrap across multiple 
rows or columns when the container doesn't have enough space to display all items on a single row 
or column. The default value is "nowrap", which means that the elements are not wrapped. Other 
possible values are "wrap" and "wrap-reverse". 


Flex-Justify-Content: The "justify-content" property can be used to control how the flex items are 


aligned along the main axis. Examples of possible values are "flex-start", "center", "flex-end", "space- 
between", and "space-around". 


Flex-Align-Items: The "align-items" property can be used to control how the flex items are aligned 


along the transverse axis. Examples of possible values are "flex-start", "center", "flex-end", "baseline" 
and "stretch". 


Flex-Grow, Flex-Shrink, Flex-Base: These properties allow you to adjust the size and behavior of flex 
items in relation to each other. "Flex-grow" determines how much space an element should take up 
relative to other elements when the container has more space than the elements need. "Flex-shrink" 
specifies how much an element should shrink in relation to other elements when the container has 
less space than the elements need. "Flex-basis" defines the basic width of an element on which the 
flex-grow and flex-shrink properties are based. 


Flexbox offers many possibilities to create responsive and adaptable layouts. However, it is important 
to note that support for certain properties varies from browser to browser and it may therefore be 
advisable to implement fallback solutions to ensure that the theme renders correctly on all devices 
and browsers. 


grid layout 

Grid Layout is a layout model in CSS that allows elements to be arranged in a grid structure. It allows 
to divide elements into columns and rows and to control their size, position and alignment within the 
grid. 


Grid container: In order to use grid layout, a grid container must first be created by applying the 
"display: grid" or "display: inline-grid" property to an HTML element. Example: 


„Container { 
display: grid; 
} 


Grid items: All direct children of the grid container automatically become grid items. Each grid item 
can adjust its size, position and alignment within the grid. 


Grid Template Columns and Rows: The number and size of the columns and rows in the grid can be 
set using the "grid-template-columns" and "grid-template-rows" properties. Example: 


„Container { 

display: grid; 

grid-template-columns: repeat(3, 1fr); 
grid-template-rows: 100px 200px; 

} 


In this example, the grid would have three columns that are all the same size (1fr) and two rows that 
are 100px and 200px high. 


Grid Column and Row Gap: The grid-column-gap and grid-row-gap properties can be used to set the 
spacing between the columns and rows in the grid. 


Grid-Area: Each grid item can be assigned to a specific grid cell (grid area) using the "grid-area" 
property. Example: 


‚item1{ 
grid area: 1/2/3/4; 


} 


In this example, the grid item with the class "item1" would occupy the cells in the first and second 
row and the second and third column. 


Grid-Auto-Flow: The "grid-auto-flow" property can be used to control how grid items are placed 
when there are not enough cells to accommodeate all grid items. Examples of possible values are 


"row", "column" and "dense". 


Grid layout offers many possibilities to create complex and attractive layouts and allows to arrange 
elements in a structured way. It also allows easy adjustments for different screen sizes and devices 
by using percentages and flexible units like "fr" (fraction) for column and row sizes. 


However, it is important to note that support for certain properties varies from browser to browser 
and it may therefore be advisable to implement fallback solutions to ensure that the theme renders 
correctly on all devices and browsers. 


It's also important to plan and test carefully when using Grid Layout to ensure that the design is 
correct, meets expectations, and that it doesn't compromise accessibility and usability. 


A good practice when using grid layouts is to think mobile-first and then adapt the grid structure for 
larger screens. 


A.Transitions, animations and transformations 


CSS transitions 

CSS Transitions allow changes to CSS properties to be performed smoothly and animatedly rather 
than abruptly. They allow changes to a property to take place over a period of time, rather than 
changing it immediately. 


transition-property: The "transition-property" property can be used to specify which CSS property 
should be animated. Example: 


.example { 
transition-property: background-color; 


} 


transition-duration: The "transition-duration" property can be used to set the duration of the 
animation. The value can be specified in seconds (s) or milliseconds (ms). Example: 


‚example { 


transition duration: 0.5s; 


} 


transition-timing-function: The transition-timing-function property can be used to control the speed 


of the animation over time. Examples of possible values are "linear", "ease", 


ease-in", "ease-out" 
and "ease-in-out". 


transition-delay: The "transition-delay" property can be used to set a delay before the animation 
runs. The value can be specified in seconds (s) or milliseconds (ms). Example: 


.example { 
transition delay: 15; 


} 


Shorthand syntax: All four properties can also be combined into a single "transition" property. 
Example: 


‚example { 
transition: background-color 0.55 ease-in 1s; 


} 


Transition triggers: Transitions are usually triggered when a property changes. This can be done by a 
click, amouseover or by changing the value in javascript. 


Transitions make it possible to create amore dynamic and responsive design by making Ul changes in 
asmooth and animated way, rather than making them abrupt. However, it is important to note that 
too many or excessively long transitions can affect the user experience and slow down the page. 


CSS animations 

CSS animations make it possible to display complex movements and visual effects with CSS. They 
make it possible to create keyframes that describe how an element should look and behave over 
time. 


@keyframes rule: In order to create an animation, you must first create a @keyframes rule that 
describes the different states ofthe animation. Example: 


@keyframes example { 

0% { 

transform: rotate(Odeg); 

} 

100% { 

transform: rotate(360deg); 
} 

} 


In this example, the animation would start by rotating the element to O degrees and end by rotating 
it to 360 degrees. 


animation-name: To apply animation to an element, you must use the animation-name property to 
specify the name ofthe @keyframes rule to use. Example: 


‚example { 
animation name: example; 


} 


animation-duration: The animation-duration property can be used to set the duration ofthe 
animation. The value can be specified in seconds (s) or milliseconds (ms). Example: 


‚example { 


animation duration: 3s; 


} 


animation-timing-function: The animation-timing-function property can be used to control the speed 


of the animation over time. Examples of possible values are "linear", "ease", "ease-in", "ease-out" 
and "ease-in-out". 


animation-delay: The animation-delay property can be used to set a delay before the animation runs. 
The value can be specified in seconds (s) or milliseconds (ms). Example: 


‚example { 


animation delay: 15; 


} 


animation-iteration-count: The animation-iteration-count property can be used to set the number of 
times the animation should be repeated. The value can be a number indicating the number of 
repetitions or "infinite" to make the animation repeat endlessly. Example: 


‚example { 


animation iteration count: 3; 


} 


animation-direction: The animation-direction property can be used to specify in which direction the 
animation should be repeated. Examples of possible values are "normal", "reverse" and "alternate". 


animation-fill-mode: The animation-fill-mode property can be used to specify what the element 
should look like when the animation is not running. Examples of possible values are "none", 
"forwards" and "backwards". 


Shorthand syntax: Allthese properties can also be combined into a single property "animation". 
Example: 


‚example { 
animation: example 35 ease-in 15 3; 


} 


CSS animations make it possible to create an attractive and dynamic design, creating complex 
movements and visual effects. However, it is important to note that too many animations or 
excessively long animations can affect the user experience and slow down the page. It's also 
important to plan and test carefully to ensure animations perform as expected and don't 
compromise accessibility and usability. 


It is important to pay attention to the performance and support of older browsers, as not all 
browsers offer the same support for CSS animations. It may be necessary to implement fallback 
solutions to ensure animations render correctly across devices and browsers. 


lt is also advisable to use certain animations only for interactions and not for static content to 
improve usability and accessibility. 


CSS transformations 

CSS Transformations make it possible to transform elements on a web page by changing various 
properties such as position, scale, rotation, and skew. They can be used to move, rotate, scale and 
mirror elements. 


transform-property: The "transform" property can be used to specify what type of transformation 
should be applied to an element. Examples of possible values are translate, rotate, scale, and skew. 
Example: 


.example { 
transform: rotate(45deg); 


} 


translate(): With the "translate()" function, an element can be moved horizontally and vertically. 
Example: 


.example { 
transform: translate(10px, 20px); 


} 


rotate(): With the "rotate()" function, an element can be rotated by a specific angle. Example: 


.example { 
transform: rotate(45deg); 


} 


scale(): With the "scale()" function, an element can be scaled horizontally and vertically. Example: 


.example { 
transform: scale(1.5, 2); 


} 


skew(): With the "skew()" function, an element can be skewed by a certain angle in horizontal and 
vertical direction. Example: 


‚example { 
transform: skew(10deg, 20deg); 
} 


transform-origin: The "transform-origin" property can be used to set where to run a transform from. 
The value can be specified in percent or pixels and can be set for both horizontal and vertical 
alignment. Example: 


‚example { 
transform-origin: 50% 50%; 


} 


CSS Transformations can be used to manipulate and style elements on a web page without changing 
the original structure of the page. However, it is important to note that support for certain properties 
varies from browser to browser and it may therefore be advisable to implement fallback solutions to 
ensure that the transforms are rendered correctly across devices and browsers. 


It's also important to plan and test carefully to ensure the transformations conform to expectations 
and don't compromise accessibility and usability. It is advisable to use certain transformations only 
for interactions and not for static content to improve usability and accessibility. 


It's also important to remember that using CSS transforms can affect performance, especially when 
using many transforms on large and complex web pages. It is therefore advisable to carefully monitor 
and tune the number of transforms used to ensure good performance. 


5.Media queries and responsive web design 


Media queries and media types 
Media queries and media types are important parts of CSS that allow the rendering of a web page to 
be adapted to different devices and screen sizes. 


Media Queries: Media queries allow CSS rules to be selected based on specific properties of the 
device or viewport. Examples of properties that can be queried are screen resolution, device 
orientation, and available screen size. Example: 


@media screen and (min-width: 600px) { 
/* CSS rules for devices with a minimum screen width of 600px */ 


} 


Media Types: Media types can be used to select CSS rules based on the type of device. Examples of 
media types are "screen" (for computer screens), "print" (for printers), and "speech" (for screen 
readers). Example: 


@media print { 
/* CSS rules for print mode */ 


} 


Responsive design: Responsive design can be achieved with media queries and media types, in which 
the display of a website is automatically adapted to the different screen sizes and devices. This 
makes it possible to ensure an optimal user experience on all devices. 


mobile first design: It is amethod that aims to develop the website for mobile devices first and then 
adapt the presentation for larger screens with media queries. This approach has the advantage that 
the website works well on all devices and the loading time on mobile devices is reduced. 


lt is important to note that media queries and media types can be supported differently from 
browser to browser and it may therefore be advisable to implement fallback solutions to ensure that 
the website is rendered correctly on all devices and browsers. 


lt is also important to consider usability and accessibility when adapting the presentation to different 
devices and screen sizes to ensure that the website is easy to navigate and use for all users. 


Responsive web design techniques 

Responsive web design is a method in which the display of a website is automatically adapted to 
different screen sizes and devices. There are several techniques that can be used to achieve 
responsive design. 


Flexible grid layout: With flexible grid layouts, the arrangement of elements on a web page can be 
automatically adapted to the screen size. This can be achieved by sizing columns and rows in 
percentages rather than pixels. 


Flexible Images: By setting the size of images as a percentage, you can ensure that they automatically 
adjust to the screen size. 


Media Queries: Media queries can be used to adjust the appearance of elements based on specific 
properties ofthe device or viewport. 


Fluid Typography: By setting the font size in percent instead of pixels, it can be ensured that it 
automatically adjusts to the screen size. 


mobile first design : it is amethod aimed at first developing the web page for mobile devices and 
then adapting the presentation for larger screens with media queries. 


JavaScript: there are some JavaScript libraries and frameworks that can help achieve responsive 
design by adjusting the arrangement of elements to the screen size. 


Progressive Enhancement: It is a technique aimed at developing the website to work on all devices 
and then adding additional features for modern browsers. 


It's important to note that none of these techniques alone will ensure a fully responsive design, and 
that a combination of different techniques is often the best solution. It is also important to consider 
usability and accessibility when adapting the presentation to different devices and screen sizes to 
ensure that the website is easy to navigate and use for all users. 


It's also important to consider performance and support for older browsers and devices, as not all 
devices offer the same level of support for modern technologies. It may be necessary to implement 
fallback solutions to ensure that the website is displayed correctly on all devices and browsers. 


It's also important to note that responsive web design is an ongoing process as technology and the 
way users use the internet continue to evolve. It is therefore important to regularly test and adjust 
the website to ensure that it continues to function optimally. 


Adaptation of layouts and images for different screen sizes 
Adjusting layouts and images for different screen sizes is an important part of responsive web design 
that helps to optimize user experience across devices. 


Flexible grid layout: A flexible grid layout allows the arrangement of elements on a web page to be 
automatically adapted to the screen size. This can be achieved by sizing columns and rows in 
percentages rather than pixels. Example: 


.grid-container { 
display: grid; 
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 


} 


Flexible Images: By setting the size of images as a percentage, you can ensure that they automatically 
adjust to the screen size. Example: 


img { 
max width: 100%; 
height: auto; 


} 


Adaptive Images: With Adaptive Images you can ensure that the correct image size is loaded for the 
viewport. This saves bandwidth and increases loading speed. 


Art Direction: With Art Direction you can ensure that the image is displayed differently on different 
screen sizes. 


CSS techniques such as media queries and flexbox: These techniques make it possible to choose 
different CSS rules for different screen sizes and adjust the appearance of elements. 


JavaScript: there are some JavaScript libraries and frameworks that can help to adjust the layout and 
images on different screen sizes. 


It's important to note that adapting layouts and images for different screen sizes is an ongoing 
process as technology and the way users use the internet continue to evolve. It is therefore 
important to regularly test and adjust the website to ensure that it continues to function optimally. 


6.Use of CSS frameworks and tools 


Bootstrap 

Bootstrap is a free and open front-end framework designed to simplify the creation of responsive 
and mobile-friendly websites. It provides a collection of CSS and JavaScript components that can be 
used to style layouts, forms, buttons, navigation bars, and other elements. 


Grid system: Bootstrap uses a flexible grid system that allows the arrangement of elements on a web 
page to be automatically adjusted to the screen size. This grid system is divided into columns and 
rows and allows elements to be displayed in different sizes. 


Components: Bootstrap comes with a variety of preconfigured components that make it quick and 
easy to create professional-looking websites. Examples of components are buttons, forms, navigation 
bars, modals, and tables. 


Design Templates: Bootstrap offers anumber of design templates that make it quick and easy to 
create a professional website design. Examples include homepage, blog page, and landing page 
templates. 


JavaScript Plugins: Bootstrap also offers a number of JavaScript plugins that allow interactivity and 
dynamics to be built into the website. Examples of plugins are modals, carousels, tooltips and 
popovers. 


Browser support: Bootstrap was developed to support the latest web standards and is compatible 
with most modern browsers, including Internet Explorer 10+. 


Customization: Bootstrap also allows to customize the look of the components by adding your own 
CSS rules. 


Bootstrap is a very powerful tool to create responsive websites quickly and easily, and it also offers a 
variety of resources and documentation to help developers learn and customize the framework. It's 
also a very popular choice among developers as it has a large community that regularly provides 
updates and enhancements. 


A downside of Bootstrap can be that it limits the flexibility and control developers can have since 
many ofthe components and design templates are preconfigured. It can also cause problems when 
trying to create a unique theme, as many websites using Bootstrap can look similar. 


Overall, Bootstrap is a great tool for developers looking for a quick and easy way to build responsive 
websites. It offers a variety of resources and support and is a popular choice among developers. 
However, it is important to keep in mind the limitations and potential problems when using it. 


Foundation 

Foundation is another front-end framework designed to simplify the creation of responsive and 
mobile-friendly websites. It is similar to Bootstrap in many ways, but offers some differences and 
additional features. 


Grid system: Like Bootstrap, Foundation uses a flexible grid system that allows the arrangement of 
elements on a web page to be automatically adjusted to the screen size. However, it has some 
differences in terms ofthe number of columns and the way they are arranged. 


Components: Foundation provides a similar collection of out-of-the-box components as Bootstrap, 
including buttons, forms, navigation bars, and modals. However, it also offers some additional 
features such as built-in accessibility support and a number of advanced JavaScript plugins. 


Design Templates: Foundation also offers design templates that make it quick and easy to create a 
professional website design. However, it offers fewer design templates than Bootstrap. 


Browser support: Foundation supports the latest web standards and is compatible with most modern 
browsers, including Internet Explorer 9+. 


Customizing: Foundation also allows to customize the appearance of the components by adding your 
own CSS rules and it also allows for more flexible customization compared to Bootstrap. 


Sass: Foundation is based on Sass, a CSS pre-processor, which makes it possible to make the 
Foundation styles even more flexible and adaptable. 


Regarding the choice between Bootstrap and Foundation, it mainly depends on the developer's 
needs and preferences. Both offer similar functionality, however Foundation has some additional 
features and allows developers more flexibility and control. 


bulma 

Bulma is another front-end framework designed to simplify the creation of responsive and mobile- 
friendly websites. It is an open source project and has a lightweight architecture and is easy to learn 
and implement. 


Grid system: Bulma uses a flexible grid system that allows the arrangement of elements on a web 
page to be automatically adjusted to the screen size. It supports 12 columns and allows elements to 
be displayed in different sizes. 


Components: Bulma offers a collection of preconfigured components that make it quick and easy to 
create professional-looking websites. EXxamples of components are buttons, forms, navigation bars, 
modals, and tables. 


Design Templates: Bulma doesn't have any pre-made design templates, it rather focuses on the 
basics to give developers full control over the design. 


JavaScript Plugins: Bulma does not offer JavaScript plugins, it relies more on CSS and HTMLto build 
interactivity and dynamics into the website. 


Browser support: Bulma supports the latest web standards and is compatible with most modern 
browsers, including Internet Explorer 11+. 


Customization: Bulma also allows to customize the look of the components by adding your own CSS 
rules and it's very easy to create your own styles. 


Bulma is a good framework for developers looking for a quick and easy way to create responsive 
websites. It has a very low learning curve and offers good support and documentation. However, it 
doesn't offer any pre-built theme templates and JavaScript plugins, so it can be a bit limited at times 
when it comes to building interactivity and dynamics into the website. It relies more on CSS and 
HTML to provide these functionalities. However, this can also be an advantage as it gives developers 
full control over the design and interactivity. 


Overall, Bulma is a very good framework for developers looking for a simple and easy-to-learn 
solution to create responsive websites. It has a low learning curve and offers good support and 
documentation. However, it is important to keep the limitations in mind when it comes to building 
interactivity and dynamics into the website. 


CSS preprocessors (Sass, Less) 

CSS preprocessors are programming languages that provide advanced functionality and possibilities 
for writing CSS. They allow developers to organize, structure, and iterate their code, and make CSS 
code easier to maintain and extend. 


Sass (Syntactically Awesome Stylesheets) is a well-known CSS preprocessor framework that provides 
advanced features like variables, mixins, nesting, and loops. It allows developers to structure and 
organize their code and makes it easy to maintain and extend CSS code. Sass can be written in 
various syntaxes including SCSS (Sassy CSS) and Sass. 


Less (Leaner Style Sheets) is another popular CSS preprocessor framework that provides similar 
functionality to Sass. It has features like variables, mixins, nesting, and loops. It also supports the use 
of math operators and functions. Less can also be written in different syntaxes including CSS and 
Less. 


Both Sass and Less allow developers to structure and organize their CSS code and make it easier to 
maintain and extend CSS code. Both also offer advanced features like variables, mixins, nesting, and 
loops. The difference between the two is mainly in the syntax and the way they are written. 


Another advantage of CSS preprocessors is the ability to compile, which means that the preprocessor 
converts the code into regular CSS and writes the result into a single CSS file that can be read in the 
browser. 


Overall, CSS preprocessors are useful tools for developers who need advanced features and 
capabilities for writing CSS. They make CSS code easier to maintain and extend, and allow developers 
to structure and organize their code. Sass and Less are both popular choices among developers based 
on personal preference and experience with the syntax and the way they are written. Both offer 
similar features and capabilities, but it may make sense to choose one of them based on the nature 
of the projects and the developer's experience. 


There are other CSS preprocessors like Stylus and PostCSS that can also be used, however Sass and 
Less are the most commonly used. 


It's important to note that using CSS preprocessors adds an extra layer of complexity and takes some 
time to learn and understand. However, it is a good investment as it makes CSS code easier to 
maintain and extend and can speed up the development of projects. 


CSS autoprefixer 
CSS Autoprefixer is a tool that automatically adds the necessary prefixes for various CSS properties to 
ensure they render correctly in all supported browsers. 


Browser Compatibility: Each browser interprets CSS properties and rules differently, and it is often 
necessary to add special prefixes for certain properties to ensure they render correctly in all 
supported browsers. Examples of such prefixes are -webkit- for Chrome and Safari and -moz- for 
Firefox. 


Usage: The CSS autoprefixer can be used either as a Node.js module or as an integrated part of build 
tools like Grunt or gulp. It can also be integrated with development environments such as Webpack 
and PostCSS. 


Configuration: When using the autoprefixer, it is specified which browser versions are to be 
supported. This way you can ensure that only the necessary prefixes are added. 


Advantages: The use of Autoprefixer simplifies the developer's work, as he no longer has to check 
which prefixes are necessary for which browser. It ensures that the code remains clearer and more 
consistent and saves time and resources because you no longer have to worry about browser 
compatibility. 


Disadvantages: Autoprefixer is unable to solve problems caused by different implementations of 
browsers that cannot be solved by prefixes. It should therefore still be tested manually to ensure that 
the code works correctly in all supported browsers. 


Overall, the CSS autoprefixer is a useful tool for developers that can simplify browser compatibility of 
CSS code and speed up development. However, it is important to ensure that the code is still 
manually tested to ensure that it works correctly in all supported browsers, as Autoprefixer is not 
able to solve all the problems caused by the different implementations of the browsers . 


lt is also important to note that using autoprefixer does not mean that the code is optimized for all 
possible browser versions. It's still important to ensure that the code is tested for the supported 
browser versions to ensure it works correctly. 


There are other autoprefixer tools like prefixfree and -prefix-free, but autoprefixer is one ofthe most 
used and supports most modern browsers. 


In summary, the autoprefixer is an important tool for developers to ensure that the code works 
correctly in all supported browsers without having to worry about browser compatibility themselves. 
lt makes work easier and allows developers to focus on developing the actual functionalities. 


7.Troubleshooting and troubleshooting 


Browser Compatibility Issues 

Browser compatibility issues occur when code that works properly in one browser doesn't work 
properly in another browser, or appears differently. This can occur in anumber of ways, and solving 
these problems often requires special efforts. 


Different implementations: Each browser interprets and implements HTML, CSS and JavaScript 
differently. Some browsers support certain properties and methods that are not supported in other 
browsers, and sometimes there are differences in the way certain properties are presented. 


Older browser versions: Some older browser versions may not support the latest technologies and 
standards. This can cause the code to work correctly in newer browsers but not work properly in 
older browsers. 


Mobile browsers: Mobile browsers often have limited resources and different screen sizes compared 
to desktop browsers, which can lead to problems in displaying web pages. 


Solutions: To solve browser compatibility issues, there are various techniques and tools that 
developers can use. These include using polyfills and feature detection to provide missing 
functionality in older browsers, using media queries and CSS preprocessors to customize the 
rendering for mobile devices, and using browser emulators and testing tools to test the code Test 
and debug in different browser versions. 


Another important tool is the autoprefixer, which automatically adds the necessary prefixes for 
various CSS properties to ensure that they are rendered correctly in all supported browsers. 


It's also important to follow best practices when writing HTML, CSS, and JavaScript to minimize 
browser compatibility issues. This includes using valid HTML, CSS and JavaScript, avoiding browser- 
specific hacks and using standards and technologies that are supported by most browsers. 


It is important to note that browser compatibility issues remain an ongoing problem as new browser 
versions and technologies are constantly being released and it is always necessary to update and 
adjust the code to ensure it works correctly in all supported browsers. 


In summary, browser compatibility issues are a complex issue and require a lot of effort to solve. 
However, there are various techniques and tools that developers can use to ensure compatibility 
with different browsers. It's important to follow best practices when writing HTML, CSS, and 


JavaScript, test regularly, and use the latest technologies and tools to ensure compatibility with 
different browsers. 


CSS debugging tools 
CSS debugging tools are tools that help developers identify and fix problems with CSS code. They 
allow developers to view, edit, and debug the code to solve appearance and layout issues. 


Browser DevTools: Most modern browsers have built-in DevTools that allow developers to view, edit, 
and debug the source code. They allow developers to identify, examine, and manipulate elements on 
a page to solve appearance and layout problems. 


Browser Extensions: There are also many browser extensions designed specifically for CSS debugging. 
Examples are the Chrome extensions "CSS Viewer" and "CSS Peeper". They offer additional 
functionality such as the ability to display color values, fonts, and spacing used in an element. 


Online tools: There are also many online tools that help developers identify and fix problems with 
CSS code. Examples are "CSS Lint" and "CSS Validator" which allow developers to check the code for 
errors and problems and to improve it. 


Frameworks and Libraries: Some frameworks and libraries, such as Bootstrap and Foundation, 
provide CSS debugging tools that allow developers to troubleshoot appearance and layout issues. 


Integrated Development Environments: There are also IDEs (Integrated Development Environments) 
such as Visual Studio Code and Sublime Text that are specifically designed for writing and debugging 
CSS and providing advanced features such as code completion and highlighting, debugging, and 
support for CSS preprocessors and provide autoprefixers. 


In summary, there are many different CSS debugging tools that help developers identify and fix 
problems with CSS code. This includes built-in DevTools in modern browsers, browser extensions, 
online tools, frameworks and libraries, and integrated development environments. Every developer 
should become familiar with these tools and select the ones that best suit their needs and work 
processes in order to solve appearance and layout problems quickly and efficiently. 


Troubleshooting layout issues 

Layout issues are common in CSS projects and can affect various aspects of page view, such as the 
positioning of elements, the size of elements, the spacing between elements, and how elements 
appear on different devices and screen sizes. 


One of the most common ways to troubleshoot layout issues is to use browser DevTools. Most 
modern browsers have built-in DevTools that allow developers to view, edit, and debug the source 
code. These tools allow developers to identify, examine, and manipulate elements on a page to solve 
appearance and layout problems. You can also use the Element Inspectors to view the CSS rules 
applied to a specific element and edit the rules to improve the layout. 


Browser extensions are another useful resource when troubleshooting layout issues. There are many 
browser extensions designed specifically for CSS debugging, and these provide additional 
functionality such as the ability to view color values, fonts, and spacing used in an element. An 
example is the CSS Peeper Chrome extension, which allows developers to inspect and edit the CSS 
rules of an element in a page. 


Online tools are another resource developers can use when troubleshooting layout issues. There are 
many online tools that help developers identify and fix problems with CSS code. Examples are "CSS 
Lint" and "CSS Validator" which allow developers to check the code for errors and problems and to 
improve it. 


Some frameworks and libraries like Bootstrap and Foundation also provide CSS debugging tools that 
allow developers to troubleshoot appearance and layout issues. You can use these tools to customize 
the layout using the classes and functions provided. 


Integrated development environments like Visual Studio Code and Sublime Text also provide 
advanced capabilities for writing and debugging CSS. They usually have code completion and 
highlighting, debugging, and support for CSS preprocessors and autoprefixers. These features make it 
easier for developers to quickly identify and fix layout issues by automatically detecting and 
correcting errors in code. 


One important thing to keep in mind when troubleshooting layout issues is to verify the layout on 
different devices and screen sizes. Many layout issues occur because of inconsistent displays across 
different devices. Therefore, it's important to test the layout on different devices and screen sizes to 
ensure it displays properly on all devices. 


In summary, there are many tools and methods that developers can use to identify and fix layout 
problems. This includes browser DevTools, browser extensions, online tools, frameworks and 
libraries, and integrated development environments. It's important to try different tools and select 
the ones that best suit the developer's needs and workflow to quickly and effectively troubleshoot 
layout issues. 


8.Advanced CSS Techniques 


Pseudo elements and classes 

Pseudo elements and classes are special CSS properties that make it possible to style specific parts of 
an HTML element without having to modify the element itself. They make it possible to change the 
content and appearance of elements without having to change the HTML code. 


Pseudo elements are special notations that are appended to the element they are intended to affect. 
They always start with a colon (:) and can be used to style specific parts of the element. Examples of 
pseudo-elements are :before and :after, which can be used to insert content before or after the 
element without changing the HTML code. 


Pseudo-classes are special notation attached to an element to indicate when it is in a certain state. 
They always start with a colon (:) and can be used to style specific parts of the element when it isin a 
specific state. Examples of pseudo-classes are :hover, :active, and :focus, which can be used to style 
the element when the user mouses over, clicks, or has focus. 


There are many ways to use pseudo elements and classes to manipulate the appearance of elements. 
Some examples are: 


Using :before and :after to add content before or after the element. 

Use :hover, :active, and :focus to style the element when the user mouses over, clicks, or has focus. 
Using :nth-child to style specific elements within a parent element. 

Using :first-letter and :first-line to style specific portions of text within an element. 


It is important to note that not all browsers support all pseudo-elements and classes, so developers 
should ensure that the pseudo-elements and classes used are supported in the target browsers 
before using them in their project. There are also some older browsers that do not support all 
modern pseudo-elements and classes, so it is important to ensure compatibility and provide 
appropriate fallbacks where necessary. 


Pseudo elements and classes can be used in CSS in a number of ways. They can be attached directly 
to the element by prefixing the element name, eg"p:hover" or they can be defined as a class and 
then applied to the element, eg ".hover:hover". 


In summary, pseudo elements and classes are useful tools for developers to style specific parts of 
HTML elements without having to modify the HTML code. They make it possible to change the 
content and appearance of elements without having to change the HTML code. Developers should 
ensure that the pseudo-elements and classes used are supported in the target browsers to avoid 
compatibility issues. 


Use of SVG graphics 

SVG (Scalable Vector Graphics) is an XML-based format for vectorial graphics that makes it possible 
to create graphics that are scalable and of high quality. Unlike raster-based graphics like JPEG and 
PNG, which are made up of pixels, SVG graphics are made up of vector graphic elements such as 
lines, curves, and shapes. This allows SVG graphics to be scaled without loss of quality, making them 
particularly suitable for use in responsive designs that display on different screen sizes and 
resolutions. 


There are several ways to include SVG graphics in HTML documents. One way is to write the SVG 
code directly in the HTML document by embedding it in an "svg" element. Another option is to 
reference the SVG graphic as an external file and include it in the HTML document by setting it as the 
background image of an HTML element, or by including it with the "img!" tag. 


SVG graphics can also be styled with CSS by applying the CSS rules to specific parts of the SVG 
graphic. This makes it possible to change the appearance of the graphic without having to change the 
SVG code. 


There are also many tools that allow creating and editing SVG graphics, such as Adobe Illustrator, 
Inkscape and Sketch. These tools make it possible to create and edit vector graphic elements to 
create complex SVG graphics. They also provide the ability to directly edit and customize the SVG 
code ifneeded. 


Another useful feature of SVG is the ability to create interactive elements. By using JavaScript, certain 
parts ofthe SVG graphics can be animated or react to user interactions. This makes it possible to 
create interactive charts, maps and other types of graphics. 


However, it is important to note that not all browsers offer full support for SVG and there may be 
compatibility issues as well. To ensure that the SVG graphics are displayed correctly, it is important to 
test compatibility with target browsers and provide fallbacks if necessary. 


In summary, SVG graphics are a useful format for creating high-quality, scalable graphics. They are 
particularly suitable for use in responsive designs and make it possible to create interactive elements. 
There are many tools for creating and editing SVG graphics, however developers should test 
compatibility with target browsers and provide fallbacks where necessary. 


Use of web fonts 

Webfonts are fonts that can be used on websites to customize how text is displayed. Unlike the fonts 
that are installed on the user's computer, web fonts are loaded from a web server and embedded in 
the HTML document. This allows developers to ensure that the font is displayed correctly on all 
devices and browsers that are used to visit the website. 


There are several ways to embed web fonts in a website. One way is to use @font-face in CSS to 
include the font directly in the document. However, this requires the fonts to be served on the web 
server. Another option is to use external services such as Google Fonts or Adobe Typekit, which 
provide a large selection of fonts and simplify integration. 


It's important to note that not all fonts are licensed for use on the web. Developers should ensure 
that the fonts used are licensed for web use to avoid copyright issues. 


Using @font-face 

@font-face is a CSS rule that allows fonts that are not installed on the user's computer to be included 
directly inthe HTML document. This allows developers to customize the appearance of text using 
fonts that are not installed on the user's computer. 


To include a font with @font-face, the font must first be made available on the web server. This can 
be done either by uploading the font to your own server or by using an external service. 


The font can then be embedded in CSS with @font-face. An example of using @font-face looks like 
this: 


@font face { 

font-family: 'MyFont'; 

src: url('myfont.woff') format('woff'), 
url('myfont.ttf') format('truetype'); 
font-weight: normal; 

font-style: normal; 


} 


@font-face is a CSS rule that allows fonts that are not installed on the user's computer to be included 
directly inthe HTML document. This allows developers to customize the appearance of text using 
fonts that are not installed on the user's computer. 


To include a font with @font-face, the font must first be made available on the web server. This can 
be done either by uploading the font to your own server or by using an external service. 


The font can then be embedded in CSS with @font-face. An example of using @font-face looks like 
this: 


Copy code 

@font face { 

font-family: 'MyFont'; 

sre: url('myfont.woff') format('woff'), 
url('myfont.ttf') format('truetype'); 
font-weight: normal; 

font-style: normal; 


} 


This example defines the font "MyFont" and specifies the files "myfont.woff" and "myfont.ttf" as the 
source. It is important that the font is provided in different formats to ensure compatibility with 
different browsers. 


Once included, the font can then be used like any other font in CSS by using it as the value for the 
"font-family" property. For example, you could use the following CSS code to display an element in 
the font "MyFont": 


pt 
font-family: 'MyFont', sans-serif; 


} 


It's important to note that not all fonts are licensed for use on the web. Developers should ensure 
that the fonts used are licensed for web use to avoid copyright issues. There are also font services 
that offer free and licensed fonts. 


In summary, @font-face allows developers to include fonts that are not installed on the user's 
computer directly into the HTML document to customize the appearance of texts. However, it is 
important to ensure that the fonts used are licensed for web use and to test for compatibility with 
different browsers. 


Using CSS variables 
CSS Variables, also known as CSS Custom Properties, allow developers to store and reuse values in 
CSS. They allow value reuse and theme customization without changing the CSS code. 


CSS variables are defined with the "--" prefix and can be applied to either an element, class or ID. An 
example of using CSS variables looks like this: 


:root { 
--main-color: blue; 


} 


p{ 


color: var(--main-color); 


} 


In this example, the variable "--main-color" is defined on the ":root" element and assigned the value 
"blue". Then the variable is used in the "color" property ofthe "p" elements. 


CSS variables can also be used in other variables. An example of this is: 


:root { 
--main-color: blue; 
--secondary-color: var(--main-color); 


} 


p{ 


color: var(--main-color); 


} 


.highlight { 
background-color: var(--secondary-color); 


} 


In this example, the variable "--main-color" is defined on the ":root" element and assigned the value 
"blue". Then this variable is transferred to a new variable called "--secondary-color". This way you 
can ensure that both colors are the same and changes to one variable automatically change the 
other variable as well. 


CSS variables can also be used in media queries to adapt the design to different screen sizes. An 
example of this is: 


:root { 

--main-color: blue; 
--breakpoint: 768px; 
} 


@media (min-width: var(--breakpoint)) { 


p{ 


color: var(--main-color); 


} 
} 


This example uses the --breakpoint variable to set the screen size for the media query. 


In summary, CSS variables allow value reuse and theme customization without changing the CSS 
code. They can be applied to either an element, a class or an ID and can also be used in other 
variables and media queries. They are a useful tool for making code cleaner and more maintainable, 
and allow developers to make design changes faster and more efficiently. However, it is important to 
note that not all browsers offer full support for CSS variables and there may be compatibility issues 
as well. To ensure that the website is displayed correctly on all devices and browsers, it is important 
to test compatibility with target browsers and provide fallbacks where necessary. 


Use of CSS Grid and Flexbox 


CSS Grid and Flexbox are two technologies that allow developers to design the layout arrangement of 
HTML elements on a web page. Both technologies offer different ways of arranging elements on a 
page and are more suitable depending on the needs of the website. 


CSS Grid is a layout system that allows elements to be arranged in a grid. It allows to define the size 
and position of elements in rows and columns and adjust them to create a complex layout. An 
example using CSS Grid looks like this: 


„Container { 

display: grid; 

grid-template-columns: repeat(3, 1fr); 
grid-template-rows: 100px 100px; 

} 


This example creates a grid with 3 columns and 2 rows. The columns and rows each have a fixed size. 


Flexbox is a layout system that allows elements to be flexibly arranged in a single dimension. It allows 
to define the size and position of elements along a major axis (usually horizontal) and a transverse 
axis (usually vertical). An example using Flexbox looks like this: 


„Container { 
display: flexible; 
flex wrap: wrap; 
align-items: center; 


} 


This example creates a flexible layout in which elements are aligned along the main horizontal axis 
and automatically break into multiple lines when they exceed the available space. 


In general, CSS Grid is better suited when you want to arrange the layout in a grid, while Flexbox is 
better when you want to flexibly arrange the layout in a single dimension. However, it is also possible 
to combine them together to create complex layouts. It is important to note that not all browsers 
offer full support for both technologies and there may be compatibility issues as well. To ensure that 


the layout is displayed correctly on all devices and browsers, it is important to test compatibility with 
target browsers and provide fallbacks where necessary. 


In summary, CSS Grid and Flexbox allow developers to design the layout order of HTML elements on 
a web page. Both technologies offer different ways of arranging elements on a page and are more 
suitable depending on the needs of the website. However, it is also possible to combine them 
together to create complex layouts. It is important to test compatibility with target browsers and 
provide fallbacks where necessary. 
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